<template>
  <div class="box">
    <div>
      <el-form
        ref="loginForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        class="login-box"
      >
        <h3 class="login-title">学生登录</h3>
        <el-form-item label="账号" prop="username">
          <el-input
            type="text"
            placeholder="请输入账号"
            v-model="form.username"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="form.password"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginForm')">登录</el-button>
          <el-button type="primary" @click="regist()">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { studentLogin } from "../../public/schoolData.js";
export default {
  name: "studentLogin",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },
      // 对话框显示和隐藏
      dialogVisible: false,
    };
  },
  created() {
    if (sessionStorage.getItem("studentInfo")) {
      this.$router.push("/student");
    }
    document.onkeydown = (e) => {
      let key = window.event.keyCode;
      if (key == 13) {
        this.login("loginForm");
      }
    };
  },
  methods: {
    login(formName) {
      // 为表单绑定验证功能

      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          if (!studentLogin[this.form.username]) {
            this.$message.error("账号不存在");
            return;
          }
          if (this.form.password != studentLogin[this.form.username].password) {
            this.$message.error("密码错误");
            return;
          }
          this.$message.success("登录成功");
          this.$router.push({
            path: "/student",
            params: {
              studentId: studentLogin[this.form.username].studentId,
            },
          });
          // if (!sessionStorage.getItem("userInfo")) {
          //   this.$router.push("/studentLogin");
          // }
          sessionStorage.setItem(
            "studentInfo",
            JSON.stringify(studentLogin[this.form.username])
          );
          console.log(
            JSON.parse(sessionStorage.getItem("studentInfo")).accountId
          );
        } else {
          return false;
        }
      });
    },
    regist() {
      this.$router.push("/studentRegister");
    },
    handleClose() {},
  },
};
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>